<!DOCTYPE html>
<html>
<head>
    <title>容器</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css">
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
    <style>
        body > div {
            margin-bottom: 50px;
        }
    </style>
</head>
<body>
<div class="container">
    <h1>h1 Bootstrap 标题 (2.5rem = 40px)</h1>
    <h2>h2 Bootstrap 标题 (2rem = 32px)</h2>
    <h3>h3 Bootstrap 标题 (1.75rem = 28px)</h3>
    <h4>h4 Bootstrap 标题 (1.5rem = 24px)</h4>
    <h5>h5 Bootstrap 标题 (1.25rem = 20px)</h5>
    <h6>h6 Bootstrap 标题 (1rem = 16px)</h6>
</div>

<div class="container">
    <h1>Display 标题</h1>
    <p>Display 标题可以输出更大更粗的字体样式。提供了4个</p>
    <h1 class="display-1">Display 1</h1>
    <h1 class="display-2">Display 2</h1>
    <h1 class="display-3">Display 3</h1>
    <h1 class="display-4">Display 4</h1>
</div>
<div class="container">
    <h1>更小文本标题</h1>
    <p>small 元素用于字号更小的颜色更浅的文本:</p>
    <h1>h1 标题
        <small>副标题</small>
    </h1>
    <h2>h2 标题
        <small>副标题</small>
    </h2>
    <h3>h3 标题
        <small>副标题</small>
    </h3>
    <h4>h4 标题
        <small>副标题</small>
    </h4>
    <h5>h5 标题
        <small>副标题</small>
    </h5>
    <h6>h6 标题
        <small>副标题</small>
    </h6>
</div>
<div class="container">
    <h1>高亮文本</h1>
    <p>使用 mark 元素来
        <mark>高亮</mark>
        文本。
    </p>
</div>

<div class="container">
    <h1>缩写</h1>
    <p>abbr元素用于标记缩写或缩写</p>
    <p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
</div>
<div class="container">
    <h1>Blockquotes</h1>
    <p>The blockquote element is used to present content from another source:</p>
    <blockquote class="blockquote">
        <p>For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization,
            WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5
            million globally.</p>
        <footer class="blockquote-footer">From WWF's website</footer>
    </blockquote>
</div>

<div class="container">
    <h1>Description Lists</h1>
    <p>The dl element indicates a description list:</p>
    <dl>
        <dt>Coffee</dt>
        <dd>- black hot drink</dd>
        <dt>Milk</dt>
        <dd>- white cold drink</dd>
    </dl>
</div>

<div class="container">
    <h1>代码片段</h1>
    <p>可以将一些代码元素放到 code 元素里面:</p>
    <p>以下 HTML 元素: <code>span</code>, <code>section</code>, 和 <code>div</code> 用于定义部分文档内容。</p>
</div>


<div class="container">
    <h1>Keyboard Inputs</h1>
    <p>To indicate input that is typically entered via the keyboard, use the kbd element:</p>
    <p>Use <kbd>ctrl + p</kbd> to open the Print dialog box.</p>
</div>

<div class="container">
    <h1>Multiple Code Lines</h1>
    <p>For multiple lines of code, use the pre element:</p>
    <pre>
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both      spaces and
line breaks.
</pre>

    <div class="container">
        <h2>更多排版类</h2>
        <div>菜鸟教程：</div>
        <a href="http://www.runoob.com/bootstrap4/bootstrap4-typography.html">http://www.runoob.com/bootstrap4/bootstrap4-typography.html</a>

        <p>
            下表提供了 Bootstrap4 更多排版类的实例：</p>
        <table class="reference">
            <tbody>
            <tr>
                <th style="width:25%;">类名</th>
                <th style="width:63%;">描述</th>
                <th style="width:12%;">实例</th>
            </tr>
            <tr>
                <td><span class="marked">.font-weight-bold</span></td>
                <td>加粗文本</td>
                <td><a target="_blank" class="playitbtn tryitbtnsyntax"
                       href="/try/try.php?filename=trybs4_txt_font-weight">尝试一下</a></td>
            </tr>
            <tr>
                <td><span class="marked">.font-weight-normal</span></td>
                <td>普通文本</td>
                <td><a target="_blank" class="playitbtn tryitbtnsyntax"
                       href="/try/try.php?filename=trybs4_txt_font-weight">尝试一下</a></td>
            </tr>
            <tr>
                <td><span class="marked">.font-weight-light</span></td>
                <td>更细的文本</td>
                <td><a target="_blank" class="playitbtn tryitbtnsyntax"
                       href="/try/try.php?filename=trybs4_txt_font-weight">尝试一下</a></td>
            </tr>
            <tr>
                <td><span class="marked">.font-italic</span></td>
                <td>斜体文本</td>
                <td><a target="_blank" class="playitbtn tryitbtnsyntax"
                       href="/try/try.php?filename=trybs4_txt_font-weight">尝试一下</a></td>
            </tr>
            <tr>
                <td><span class="marked">.lead</span></td>
                <td>让段落更突出</td>
                <td><a target="_blank" class="playitbtn tryitbtnsyntax" href="/try/try.php?filename=trybs4_ref_txt_lea">尝试一下</a>
                </td>
            </tr>
            <tr>
                <td><span class="marked">.small</span></td>
                <td>指定更小文本 (为父元素的 85% )</td>
                <td><a target="_blank" class="playitbtn tryitbtnsyntax"
                       href="/try/try.php?filename=trybs4_ref_txt_small">尝试一下</a></td>
            </tr>
            <tr>
                <td><span class="marked">.text-left</span></td>
                <td>左对齐</td>
                <td><a target="_blank" class="playitbtn tryitbtnsyntax"
                       href="/try/try.php?filename=trybs4_ref_text-left">尝试一下</a></td>
            </tr>
            <tr>
                <td><span class="marked">.text-center</span></td>
                <td>居中</td>
                <td><a target="_blank" class="playitbtn tryitbtnsyntax"
                       href="/try/try.php?filename=trybs4_ref_text-left">尝试一下</a></td>
            </tr>
            <tr>
                <td><span class="marked">.text-right</span></td>
                <td>右对齐</td>
                <td><a target="_blank" class="playitbtn tryitbtnsyntax"
                       href="/try/try.php?filename=trybs4_ref_text-left">尝试一下</a></td>
            </tr>
            <tr>
                <td><span class="marked">.text-justify</span></td>
                <td>设定文本对齐,段落中超出屏幕部分文字自动换行</td>
                <td><a target="_blank" class="playitbtn tryitbtnsyntax"
                       href="/try/try.php?filename=trybs4_ref_text-left">尝试一下</a></td>
            </tr>
            <tr>
                <td><span class="marked">.text-nowrap</span></td>
                <td>段落中超出屏幕部分不换行</td>
                <td><a target="_blank" class="playitbtn tryitbtnsyntax"
                       href="/try/try.php?filename=trybs4_ref_text-left">尝试一下</a></td>
            </tr>
            <tr>
                <td><span class="marked">.text-lowercase</span></td>
                <td>设定文本小写</td>
                <td><a target="_blank" class="playitbtn tryitbtnsyntax"
                       href="/try/try.php?filename=trybs4_ref_text-lowercase">尝试一下</a></td>
            </tr>
            <tr>
                <td><span class="marked">.text-uppercase</span></td>
                <td>设定文本大写</td>
                <td><a target="_blank" class="playitbtn tryitbtnsyntax"
                       href="/try/try.php?filename=trybs4_ref_text-lowercase">尝试一下</a></td>
            </tr>
            <tr>
                <td><span class="marked">.text-capitalize</span></td>
                <td>设定单词首字母大写</td>
                <td><a target="_blank" class="playitbtn tryitbtnsyntax"
                       href="/try/try.php?filename=trybs4_ref_text-lowercase">尝试一下</a></td>
            </tr>
            <tr>
                <td><span class="marked">.initialism</span></td>
                <td>显示在 &lt;abbr&gt; 元素中的文本以小号字体展示，且可以将小写字母转换为大写字母</td>
                <td><a target="_blank" class="playitbtn tryitbtnsyntax"
                       href="/try/try.php?filename=trybs4_ref_txt_abbr2">尝试一下</a></td>
            </tr>
            <tr>
                <td><span class="marked">.list-unstyled</span></td>
                <td>移除默认的列表样式，列表项中左对齐 ( &lt;ul&gt; 和 &lt;ol&gt; 中)。 这个类仅适用于直接子列表项
                    (如果需要移除嵌套的列表项，你需要在嵌套的列表中使用该样式)
                </td>
                <td><a target="_blank" class="playitbtn tryitbtnsyntax"
                       href="/try/try.php?filename=trybs4_ref_txt_list-unstyle">尝试一下</a></td>
            </tr>
            <tr>
                <td><span class="marked">.list-inline</span></td>
                <td>将所有列表项放置同一行</td>
                <td><a target="_blank" class="playitbtn tryitbtnsyntax"
                       href="/try/try.php?filename=trybs4_ref_txt_list-inline">尝试一下</a></td>
            </tr>
            <tr>
                <td><span class="marked">.pre-scrollable</span></td>
                <td>使 &lt;pre&gt; 元素可滚动，代码块区域最大高度为340px,一旦超出这个高度,就会在Y轴出现滚动条</td>
                <td><a target="_blank" class="playitbtn tryitbtnsyntax" href="/try/try.php?filename=trybs4_ref_txt_pre">尝试一下</a>
                </td>
            </tr>
            </tbody>
        </table>

    </div>
</div>
<script>
    var tryBtns = document.getElementsByClassName("playitbtn tryitbtnsyntax");

    for (let i = 0; i < tryBtns.length; i++) {
        tryBtns[i].href = "http://www.runoob.com" + tryBtns[i].href.substring(tryBtns[i].href.indexOf('/try/try.php'),tryBtns[i].href.length);
    }
</script>
</body>
</html>